<template>
	<view class="content">
		<view class="service" @tap="$Router.push('/pages/member/service')">
			<view class="left">
				<text class="iconfont icon-kefu"></text>
				<text class="text">如有疑问需要帮助，请联系专属客服快速解决</text>
			</view>
			》
		</view>

		<view class="message-box">
			<textarea class="text-area" v-model="message" maxlength="300" placeholder="请在此输入您的宝贵意见，使用体验/优化建议都可以告诉我" @input="onInput" />
			<view class="text">您还可以输入{{ 300 - message.length }}个字</view>
        </view>

        <!--图片上传-->
        <view class="upload-images">
			<view class="image-item" v-for="(item, index) in imagesList">
				<text class="iconfont icon-cha-shixin-" @tap="removeImage(index)"></text>
				<image class="image" :src="item"></image>
			</view>
            <view class="upload-btn" @tap="uploadImage" v-if="imagesList.length < 5">
                <text class="add">+</text>
                <text class="text">添加图片</text>
            </view>
        </view>

        <view class="commit-message" @tap="commitMessage">
            提交反馈
        </view>

        <view class="message-list">
            <view class="label"><view class="line"></view>我的反馈</view>
            <view class="message-item" v-for="(item, index) in list[0].goodsList" :key="index">
                <view class="top">
                    <text class="time">{{ item.createTime }}</text>
                    <view class="status" :class="[item.replyMsg ? 'already' : 'wait']">{{ item.replyMsg ? '已回复' : '待回复' }}</view>
                </view>
                <text class="message">{{ item.content }}</text>
                <view class="reply" v-if="item.replyMsg">
                    <view><text class="iconfont icon-kefu1"></text>：{{ item.replyMsg }}</view>
                </view>
				<view class="image-list">
					<view class="image-item" v-for="image in item.imgs">
						<image class="image" :src="image"></image>
					</view>
				</view>
            </view>

            <!-- 加载中插件 -->
            <load-more
                :loading="list[0].loading"
                :finished="list[0].finished"
                :empty="list[0].empty"
				emptyType="record"
                emptyText="暂无反馈~"
            ></load-more>
        </view>

        <!--回到顶部-->
        <view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
            <text class="iconfont icon-huidaodingbu"></text>
        </view>

        <!--智能搜索-->
        <ai-search ref="aiSearch"></ai-search>
    </view>
</template>

<script>
    import loader from '@/utils/mixin/loader';
    import LoadMore from '@/components/LoadMore'
	export default {
		name: 'opinion',
        components: {
			LoadMore
        },
        mixins: [loader],
        data() {
			return {
				message: '',
				imagesList: [],
				uploadCount: 5
            }
        },
        onLoad() {
			this.init();
        },
        onShow() {
			this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
        },
		onHide() {
			this.$refs.aiSearch.close();
		},
        methods: {
			init() {
				this.list.forEach(item => {
					item.loading = false;
					item.finished = false;
					item.empty = false;
					item.page = 1;
					item.goodsList = [];
				});
				this.loadMore(this.list[0], 'afterLoad');
            },
            beforeLoad() {
				delete this.params.order;
				delete this.params.sort;
				this.service = this.$service.shopping.faquser.page(this.params);
				return true;
            },
			afterLoad() {
				this.list[0].goodsList.forEach(item => {
					item.imgs = item.imgs.split(',')
				})
			},
			onInput(e) {
                this.message = e.detail.value;
            },
			commitMessage() {
				if (!this.message) {
					uni.showToast({
						title: '请输入您的宝贵意见或优化建议',
						icon: 'none'
					});
					return false;
				}
				let params = {
					content: this.message,
					imgs: this.imagesList.join(',')
				};
				console.log(params)
				this.$service.shopping.faquser
					.add(params)
					.then(() => {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						});
						this.message = '';
						this.imagesList = [];

						// 刷新
						this.onRefresh(this.list[0]);
					})
					.catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						});
					});
			},
			uploadImage() {
				let vm = this;
				uni.chooseImage({
					count: this.uploadCount,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success(res) {
						this.uploadCount = this.uploadCount - res.tempFilePaths.length
						uni.showLoading({
							title: '上传中'
						})
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'http://taoke.daihuo.com/api/app/comm/upload',
								filePath: res.tempFilePaths[i],
								name: 'files',
								success: (uploadFileRes) => {
									vm.imagesList.push(JSON.parse(uploadFileRes.data).data);
									uni.hideLoading();
									uni.showToast({
										title: '上传成功',
										icon: 'none'
									})
								},
								fail: function(err) {
									uni.hideLoading()
									uni.showToast({
										title: err,
										icon: 'none'
									})
								},
							});
						}
					}
				})
			},
			removeImage(index) {
				this.imagesList = this.imagesList.filter((item, itemIndex) => {
					if (index === itemIndex) {
						return false;
					} else {
						return true;
					}
				});
			}
        }
	};
</script>

<style lang="scss" scoped>
    .content {
        padding: 22rpx 18rpx;
        background: #F6F7FA;
		min-height: 100vh;
        .service {
            width: 100%;
            height: 80rpx;
            background: $color-white;
            border-radius: 16rpx;
            font-size: 24rpx;
            color: $main-color;
            padding: 0 20rpx;
            box-sizing: border-box;
            @include flexBox(space-between, center);
            .left {
                @include flexBox(null, center);
                .iconfont {
                    margin-right: 10rpx;
                    font-size: 34rpx;
                }
            }
        }
        .message-box {
            margin-top: 20rpx;
            border-radius: 16rpx;
            overflow: hidden;
            background: $color-white;
            padding: 30rpx;
            box-sizing: border-box;
            .text-area {
                width: 100%;
                font-size: 26rpx;
            }
            .text {
                font-size: 24rpx;
                color: #717076;
                border-top: 2rpx solid #ebedf0;
                padding-top: 20rpx;
            }
        }
        .upload-images {
            margin-top: 20rpx;
            border-radius: 16rpx;
            overflow: hidden;
            background: $color-white;
            padding: 18rpx;
            box-sizing: border-box;
			@include flexBox(flex-atsrt, center);
			.image-item {
				width: 126rpx;
				height: 126rpx;
				border: 2rpx solid #DDDDDD;
				border-radius: 16rpx;
				margin: 0 5rpx;
				position: relative;
				.iconfont {
					color: $main-color;
					position: absolute;
					right: -14rpx;
					top: -26rpx;
					z-index: 1;
				}
				.image {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}
            .upload-btn {
                width: 126rpx;
				height: 126rpx;
				border: 2rpx solid #DDDDDD;
				border-radius: 16rpx;
				color: #B4B4B4;
				font-size: 24rpx;
				margin: 0 5rpx;
				@include flexBox(center, center, column);
				.add {
					font-size: 30rpx;
				}
            }
        }
        .commit-message {
            width: 336rpx;
            background: $main-color;
            border-radius: 50rpx;
            line-height: 80rpx;
            text-align: center;
            font-size: 28rpx;
            color: $color-white;
            margin: 78rpx auto;
        }
        .message-list {
            .label {
                color: $main-color;
                font-size: 32rpx;
                margin-bottom: 6rpx;
                @include flexBox(null, center);
                .line {
                    width: 8rpx;
                    height: 40rpx;
                    background: $main-color;
                    display: block;
                    border-radius: 50rpx;
                    margin-right: 14rpx;
                }
            }
            .message-item {
                padding: 24rpx 26rpx;
                background: $color-white;
                border-radius: 16rpx;
                margin-top: 20rpx;
                .top {
                    @include flexBox(space-between, center);
                    .time {
                        font-size: 22rpx;
                        color: #717076;
                    }
                    .status {
                        padding: 2rpx 8rpx;
                        font-size: 22rpx;
                        border-radius: 8rpx;
                        &.wait {
                            color: #ef3c49;
                            border: 2rpx solid #ef3c49;
                            background: #ffefef;
                        }
                        &.already {
                            color: #909090;
                            border: 2rpx solid #909090;
                            background: #f6f7fa;
                        }
                    }
                }
                .message {
                    font-size: 28rpx;
                    word-break: break-word;
                    color: #171717;
                }
                .reply {
                    background: #f6f7fa;
                    padding: 18rpx;
                    color: #717076;
                    font-size: 28rpx;
                    margin-top: 22rpx;
                    border-radius: 16rpx;
                    line-height: 44rpx;
                    word-break: break-word;
                    .iconfont {
                        margin-right: 10rpx;
                        font-size: 32rpx;
                    }
                }
				.image-list {
					@include flexBox(flex-start, center);
					.image-item {
						width: 126rpx;
						height: 126rpx;
						border: 2rpx solid #DDDDDD;
						border-radius: 16rpx;
						margin: 0 5rpx;
						.image {
							width: 100%;
							height: 100%;
							border-radius: 16rpx;
						}
					}
				}
            }
        }
    }
</style>
